<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>项目改2</title>
  <!--设置计算器屏幕以及按键的样式-->
  <style>
    *{margin: 0;padding: 0}
    #in_screen{
      width:270px;
      height:157px;
      border: 1px solid red;
      font-size: 2em;
      background-image: url(../images/初音6.jpg);
      background-repeat: no-repeat;
    }
    button{
      margin: 6px;
    }
    #table{
      border: 1px solid red;
      background-image: url(../images/初音2.jpg);
    }
    .btnwh{
      width:50px;
      height:50px;
    }
    #btnback,#btn7,#btn4,#btn1,#btn0,#btnty{
      margin-left: 12px;
    }
    #btnty,#btnmv{
      margin-bottom: 12px;
    }
    #btnequal,#btnchu,#btnx,#btnequal{
      margin-right: 12px;
    }
    #btnback,#btnc,{
      margin-top: 12px;
    }
    #btnback{
      background-image: url(../images/images_2/buttonback.jpg);
    }
    #btnc{
      background-image:url(../images/images_2/buttonc.jpg);
    }
    #btn7{
      background-image: url(../images/images_2/button7.jpg);
    }
    #btn8{
      background-image: url(../images/images_2/button8.jpg);
    }
    #btn9{
      background-image: url(../images/images_2/button9.jpg);
    }
    #btn4{
      background-image: url(../images/images_2/button4.jpg);
    }
    #btn5{
      background-image: url(../images/images_2/button5.jpg);
    }
    #btn6{
      background-image: url(../images/images_2/button6.jpg);
    }
    #btnchu{
      background-image: url(../images/images_2/buttonchu.jpg);
    }
    #btn1{
      background-image: url(../images/images_2/button1.jpg);
    }
    #btn2{
      background-image: url(../images/images_2/button2.jpg);
    }
    #btn3{
      background-image: url(../images/images_2/button3.jpg);
    }
    #btnx{
      background-image: url(../images/images_2/buttonchen.jpg);
    }
    #btn0{
      background-image: url(../images/images_2/button0.jpg);
    }
    #btnplus{
      background-image: url(../images/images_2/button+.jpg);
    }
    #btnminus{
      background-image: url(../images/images_2/button-.jpg);
    }
    #btnequal{
      background-image: url(../images/images_2/button=.jpg);
    }
    #btndian{
      background-image: url(../images/images_2/buttondian.jpg);
    }
    #game{
      width:114px;
      height:50px;
      background-image: url(../images/game.jpg);
    }
    #btnty{
      width:114px;
      height:50px;
      background-image: url(../images/ty.jpg);
      background-repeat: no-repeat;
      font-family: 华文楷体;
      font-size: 2em;
      text-align: right;
    }
    #btnmv{
      width:114px;
      height:50px;
      background-image: url(../images/xielunyan.jpg);
    }
  </style>
  <!--设置四个input分区动画的样式-->
  <style>
    #inp1,#inp2,#inp3,#inp4{
      width:141.1px;
      margin: -2px -6px;
      background-repeat: no-repeat;
    }
    #inp1{
      height:67px;
      border-right: none;
      border-bottom: none;
      border-left:1px solid red;
      border-top: 1px solid red;

    }
    #inp3{
      height:90px;
      border-top: none;
      border-right: none;
      border-left: 10x solid red;
      border-bottom: 1px solid red;
    }
    #inp2{
      height:67px;
      border-left: none;
      border-bottom: none;
      border-right: 1px solid red;
      border-top: 1px solid red;
    }
    #inp4{
      height:90px;
      border-top: none;
      border-left: none;
      border-right: 1px solid red;
      border-bottom: 1px solid red;
    }
    /* 通过设置原本PS好的图实现动画,人物移动通过设置背景位置(background-position)实现 */
    @keyframes cloud {
      0% {background-image: url(../images/yun/yunxiao/yun1.jpg)}
      12.5% {background-image: url(../images/yun/yunxiao/yun2.jpg)}
      25% {background-image: url(../images/yun/yunxiao/yun3.jpg)}
      37.5% {background-image: url(../images/yun/yunxiao/yun4.jpg)}
      50% {background-image: url(../images/yun/yunxiao/yun5.jpg)}
      62.5% {background-image: url(../images/yun/yunxiao/yun6.jpg)}
      75% {background-image: url(../images/yun/yunxiao/yun7.jpg)}
      87.5% {background-image: url(../images/yun/yunxiao/yun8.jpg)}
      100% {background-image: url(../images/yun/yunxiao/yun9.jpg)}
    }
    @keyframes sun {
      0% {background-image: url(../images/sun/suoxiao/sun1.jpg)}
      12.5% {background-image: url(../images/sun/suoxiao/sun2.jpg)}
      25% {background-image: url(../images/sun/suoxiao/sun3.jpg)}
      37.5% {background-image: url(../images/sun/suoxiao/sun4.jpg)}
      50% {background-image: url(../images/sun/suoxiao/sun5.jpg)}
      62.5% {background-image: url(../images/sun/suoxiao/sun6.jpg)}
      75% {background-image: url(../images/sun/suoxiao/sun7.jpg)}
      87.5% {background-image: url(../images/sun/suoxiao/sun8.jpg)}
      100% {background-image: url(../images/sun/suoxiao/sun9.jpg)}
    }
    @keyframes man {
      0% {background-image: url(../images/images_3/lman/run1.jpg);background-position: 0px 45px;}
      12.5% {background-image: url(../images/images_3/lman/run2.jpg);background-position: 17px 45px;}
      25% {background-image: url(../images/images_3/lman/run3.jpg);background-position: 34px 45px;}
      37.5% {background-image: url(../images/images_3/lman/run4.jpg);background-position: 51px 45px;}
      50% {background-image: url(../images/images_3/lman/run5.jpg);background-position: 68px 45px;}
      62.5% {background-image: url(../images/images_3/lman/run6.jpg);background-position: 85px 45px;}
      75% {background-image: url(../images/images_3/lman/run7.jpg);background-position: 102px 45px;}
      87.5% {background-image: url(../images/images_3/lman/run8.jpg);background-position: 119px 45px;}
      100% {background-image: url(../images/images_3/lman/run1.jpg);background-position: 133px 45px;}
    }
    @keyframes tree {
      0% {background-image: url(../images/tree_on/tree/tree1.jpg)}
      6.25% {background-image: url(../images/tree_on/tree/tree2.jpg)}
      12.5% {background-image: url(../images/tree_on/tree/tree3.jpg)}
      18.75% {background-image: url(../images/tree_on/tree/tree4.jpg)}
      25% {background-image: url(../images/tree_on/tree/tree5.jpg)}
      31.25% {background-image: url(../images/tree_on/tree/tree6.jpg)}
      37.75% {background-image: url(../images/tree_on/tree/tree7.jpg)}
      43.75% {background-image: url(../images/tree_on/tree/tree8.jpg)}
      50% {background-image: url(../images/tree_on/tree/tree9.jpg)}
      56.25% {background-image: url(../images/tree_on/tree/tree10.jpg)}
      62.5% {background-image: url(../images/tree_on/tree/tree11.jpg)}
      68.75% {background-image: url(../images/tree_on/tree/tree12.jpg)}
      75% {background-image: url(../images/tree_on/tree/tree13.jpg)}
      81.25% {background-image: url(../images/tree_on/tree/tree14.jpg)}
      87.5% {background-image: url(../images/tree_on/tree/tree15.jpg)}
      93.75% {background-image: url(../images/tree_on/tree/tree16.jpg)}
      100% {background-image: url(../images/tree_on/tree/tree17.jpg)}
    }
    #box1{
      width:10px;
      height:20px;
      border-radius: 0px 25px 25px 0px;
      background-image: url(../images/shexiangtou.jpg);
      position: absolute;
      left: 270px;
      top:300px;
    }
    #canvas{
      width:200px;
      height:400px;
      position: absolute;
      left:270px;
      top:100px;
    }
    #iframe{
      width:669px;
      height:384px;
      border:1px solid red;
      position: absolute;
      right:225px;
      top:115px;
    }
    #huoying,#divmv{
      width:270px;
      height:155.5px;
      border:1px solid aqua;
      position: absolute;
      left:0;
      top:0;
    }
  </style>
  <!--为计算器按键添加box-shadow样式-->
  <script>
    function back1() {
      document.getElementById("btnback").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function back2() {
      document.getElementById("btnback").style.boxShadow="none";
    }
    function c1() {
      document.getElementById("btnc").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function c2() {
      document.getElementById("btnc").style.boxShadow="none";
    }
    function n71() {
      document.getElementById("btn7").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n72() {
      document.getElementById("btn7").style.boxShadow="none";
    }
    function n81() {
      document.getElementById("btn8").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n82() {
      document.getElementById("btn8").style.boxShadow="none";
    }
    function n91() {
      document.getElementById("btn9").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n92() {
      document.getElementById("btn9").style.boxShadow="none";
    }
    function n41() {
      document.getElementById("btn4").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n42() {
      document.getElementById("btn4").style.boxShadow="none";
    }
    function n51() {
      document.getElementById("btn5").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n52() {
      document.getElementById("btn5").style.boxShadow="none";
    }
    function n61() {
      document.getElementById("btn6").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n62() {
      document.getElementById("btn6").style.boxShadow="none";
    }
    function chu1() {
      document.getElementById("btnchu").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function chu2() {
      document.getElementById("btnchu").style.boxShadow="none";
    }
    function n11() {
      document.getElementById("btn1").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n12() {
      document.getElementById("btn1").style.boxShadow="none";
    }
    function n21() {
      document.getElementById("btn2").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n22() {
      document.getElementById("btn2").style.boxShadow="none";
    }
    function n31() {
      document.getElementById("btn3").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n32() {
      document.getElementById("btn3").style.boxShadow="none";
    }
    function x1() {
      document.getElementById("btnx").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function x2() {
      document.getElementById("btnx").style.boxShadow="none";
    }
    function n01() {
      document.getElementById("btn0").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n02() {
      document.getElementById("btn0").style.boxShadow="none";
    }
    function plus1() {
      document.getElementById("btnplus").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function plus2() {
      document.getElementById("btnplus").style.boxShadow="none";
    }
    function minus1() {
      document.getElementById("btnminus").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function minus2() {
      document.getElementById("btnminus").style.boxShadow="none";
    }
    function equal1() {
      document.getElementById("btnequal").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function equal2() {
      document.getElementById("btnequal").style.boxShadow="none";
    }
    function dian1() {
      document.getElementById("btndian").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function dian2() {
      document.getElementById("btndian").style.boxShadow="none";
    }
  </script>
  <!--实现简单计算-->
  <script>
    var result;
    var operator;
    var isPressEqualsKey = false;
    function connectionDigital(control) {
      var txt = document.getElementById("in_screen");
      if(isPressEqualsKey) {
        txt.value = "";
        isPressEqualsKey = false;
      }
      if(txt.value.indexOf(".") > -1 && control.value == '.')
      return false;
      txt.value += control.value;
    }
    function backspace() {
      var txt = document.getElementById("in_screen");
      txt.value = txt.value.substring(0,txt.value.length - 1);
    }
    function clearAll() {
      document.getElementById("in_screen").value = "";
      result = "";
      operator = "";
    }
    function calculation(control) {
      operator = control.value;
      var txt = document.getElementById("in_screen");
      if(txt.value == "")return false;
      result = txt.value;
      txt.value = "";
    }
    function getResult() {
      var opValue;
      var sourseValue = parseFloat(result);
      var txt = document.getElementById("in_screen");
      if(operator == "*")
      opValue = sourseValue * parseFloat(txt.value);
      else if(operator == "/")
      opValue = sourseValue / parseFloat(txt.value);
      else if(operator == "+")
      opValue = sourseValue + parseFloat(txt.value);
      else if(operator == "-")
      opValue = sourseValue - parseFloat(txt.value);

      txt.value = opValue;
      isPressEqualsKey = true;
      result = "";
      opValue = "";
    }
  </script>
  <!--生成分区的table-->
  <script>
    function game() {
       //创建一个table以便生成四个不同的播放区
       document.getElementById("screen").style.cssFloat="left";
       var tb = document.createElement("table");
    tb.setAttribute("width", "260px");
    tb.setAttribute("height", "110px");

      //创建第一行
    tb.insertRow(0);
    var td1=tb.rows[0].insertCell(0);
       var td2=tb.rows[0].insertCell(1);
       td1.innerHTML="<input id='inp1'>";
       td2.innerHTML="<input id='inp2'>";
 
     //创建第二行
    tb.insertRow(1);
    var td3=tb.rows[1].insertCell(0);
    var td4=tb.rows[1].insertCell(1);
       td3.innerHTML="<input id='inp3'>";
       td4.innerHTML="<input id='inp4'>";
     var gameAdd = document.getElementById("screen");
    gameAdd.appendChild(tb);

       //让原来的内置框消失
       document.getElementById("in_screen").style.visibility="hidden";

       //点击按钮生成动画及播放次数
      document.getElementById("inp1").style.animation="cloud 5s";
      document.getElementById("inp2").style.animation="sun 20s";
      document.getElementById("inp3").style.animation="man 2s";
      document.getElementById("inp4").style.animation="tree 10s";
      document.getElementById("inp1").style.animationIterationCount="1000";
      document.getElementById("inp2").style.animationIterationCount="1000";
      document.getElementById("inp3").style.animationIterationCount="1000";
      document.getElementById("inp4").style.animationIterationCount="1000";

      document.getElementById("table").style.marginTop="-2px";
    }
  </script>
  <!--投影功能-->
  <script>
    function movie() {
        var mv=document.createElement("div");
        mv.id="divmv";
        var addMv=document.getElementById("body");
        addMv.appendChild(mv);
        divmv.innerHTML="<video id=huoying src='../videos/xielunyan.mp4' controls='controls'></video>"
        document.getElementById("in_screen").style.visibility="hidden";
    }
    function touying() {
      //生成一个投影孔
      var div1=document.createElement("div");
      div1.id="box1";
      var addDiv1=document.getElementById("table");
      addDiv1.appendChild(div1);
      //生成一个画布
      var canvas=document.createElement("canvas");
      canvas.id="canvas";
      var addCanvas=document.getElementById("table");
      addCanvas.appendChild(canvas);
      //实现投影效果
      var c=document.getElementById("canvas");
      var ctx=c.getContext("2d");
      ctx.beginPath();
      ctx.moveTo(10,79);
      ctx.lineTo(300,21);
      ctx.moveTo(10,79);
      ctx.lineTo(1200,330);
      ctx.strokeStyle="blue";
      ctx.stroke();

      //生成一个内联框
      var iframe=document.createElement("iframe");
      iframe.id="iframe";
      var addIframe=document.getElementById("table");
      addIframe.appendChild(iframe);
      iframe.src="../javascript/animation.html";
    }
  </script>
</head>
<body id="body">
<input id="in_screen" readonly="readonly">
<div id="screen"></div>
<table id="table">
  <tr>
    <td><button id="btnback" class="btnwh" onclick="backspace()" onmousedown="back1()" onmouseup="back2()"></button></td>
    <td><button id="btnc" class="btnwh" onclick="clearAll()" onmousedown="c1()" onmouseup="c2()"></button></td>
    <td colspan="2"><button id="game" onclick="game()" ondblclick="gamemove()"></button></td>
  </tr>
  <tr>
    <td><button id="btn7" class="btnwh" value="7" onclick="connectionDigital(this);" onmousedown="n71()" onmouseup="n72()"></button></td>
    <td><button id="btn8" class="btnwh" value="8" onclick="connectionDigital(this);" onmousedown="n81()" onmouseup="n82()"></button></td>
    <td><button id="btn9" class="btnwh" value="9" onclick="connectionDigital(this);" onmousedown="n91()" onmouseup="n92()"></button></td>
    <td><button id="btnequal" class="btnwh" value="=" onclick="getResult();" onmousedown="equal1()" onmouseup="equal2()"></button></td>
  </tr>
  <tr>
    <td><button id="btn4" class="btnwh" value="4" onclick="connectionDigital(this);" onmousedown="n41()" onmouseup="n42()"></button></td>
    <td><button id="btn5" class="btnwh" value="5" onclick="connectionDigital(this);" onmousedown="n51()" onmouseup="n52()"></button></td>
    <td><button id="btn6" class="btnwh" value="6" onclick="connectionDigital(this);" onmousedown="n61()" onmouseup="n62()"></button></td>
    <td><button id="btnchu" class="btnwh" value="/" onclick="calculation(this);" onmousedown="chu1()" onmouseup="chu2()"></button></td>
  </tr>
  <tr>
    <td><button id="btn1" class="btnwh" value="1" onclick="connectionDigital(this);" onmousedown="n11()" onmouseup="n12()"></button></td>
    <td><button id="btn2" class="btnwh" value="2" onclick="connectionDigital(this);" onmousedown="n21()" onmouseup="n22()"></button></td>
    <td><button id="btn3" class="btnwh" value="3" onclick="connectionDigital(this);" onmousedown="n31()" onmouseup="n32()"></button> </td>
    <td><button id="btnx" class="btnwh" value="*" onclick="calculation(this);" onmousedown="x1()" onmouseup="x2()"></button></td>
  </tr>
  <tr>
    <td><button id="btn0" class="btnwh" value="0" onclick="connectionDigital(this);" onmousedown="n01()" onmouseup="n02()"></button></td>
    <td><button id="btnplus" class="btnwh" value="+" onclick="calculation(this);" onmousedown="plus1()" onmouseup="plus2()"></button></td>
    <td><button id="btnminus" class="btnwh" value="-" onclick="calculation(this);" onmousedown="minus1()" onmouseup="minus2()"></button></td>
    <td><button id="btndian" class="btnwh" value="." onclick="connectionDigital(this);" onmousedown="dian1()" onmouseup="dian2()"></button></td>
  </tr>
  <tr>
    <td colspan="2"><button id="btnty" onclick="touying()">投影</button></td>
    <td colspan="2"><button id="btnmv" onclick="movie()"></button></td>
  </tr>
</table>
</body>
</html>
